<template>
  <div :class="{ 'large-font': isLargeFont }" style="max-width: 100vw; overflow-x: hidden;">
    <!-- header -->
    <div class="hero-header">
      <div class="header-content" style="margin-left: 50px; display: flex; align-items: center; max-width: 100%;">
        <span class="header-logo" style="width: 100px; height: 100px;">
          <img style="display: inline-block; width: 100px; height: 100px;" src="/src/pages/index/static/logo.png"
               alt="">
        </span>
        <span class="hear-text" style="width: 300px;">
          <div style=" margin-top: 10px;display: inline-block; color: #215eba; font-size: 16px; font-weight: 700;">
            区块链安全保障技术政务平台
          </div>
          <div class="hearderPitem" style="width: 500px; color: #3172d4; font-size: 28px; font-weight: 800;">
            社会保障助老多功能平台
          </div>
        </span>
        <img style="margin-left: 8%; height: 40px; zoom: 2;" src="/src/pages/index/static/flag5.png" alt="">
<!--        <div v-if="isLogin()" class="button" @click="toDetailPages()"-->
<!--             style="margin-right: 5%; background: #fff; border: 1px solid #5771d1; color: #5771d1; position: absolute; right: 20px; top: 28px; z-index: 999; padding: 8px 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s, color 0.3s;">-->
<!--          详情-->
<!--        </div>-->
        <div v-if="isLogin()" class="button" @click="loginOff()"
             style="background: #fff; border: 1px solid #5771d1; color: #5771d1; position: absolute; right: 120px; top: 28px; z-index: 999; padding: 8px 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s, color 0.3s;">
          注销
        </div>
        <button @click="handleFontSizeToggle" style="background: #5771d1; font-size: 16px; border: none; color: white; padding: 4px 8px; cursor: pointer; border-radius: 4px; margin-left: auto;">
          {{isLargeFont.value ? '当前为年长版' : '当前为普通版'}}
        </button>

      </div>
    </div>
    <!-- navi -->
    <div class="hy-navi" style="max-width: 100%; overflow-x: hidden;">
      <div class="navi-banner" style="max-width: 100%;">
        <div class="navitem" style="margin-left: 20px;">
          <span style="color: aliceblue;" @click="toIndexPages()">首页</span>
        </div>
        <div class="navitem" style="margin-left: 20px;">
          <span style="color: aliceblue;" @click="toInfoPages('Search')">保险查询</span>
        </div>

        <div class="navitem" style="margin-left: 20px;">
          <span style="color: aliceblue;" @click="toInfoPages('Transfer')">保险信息转移</span>
        </div>

        <div class="navitem" style="margin-left: 20px;">
          <span style="color: aliceblue;" @click="toBureau()">社保局信息</span>
        </div>
        <div class="navitem" style="margin-left: 20px;">
          <span style="color: aliceblue;" @click="toCompany()">公司保险</span>
        </div>
        <div class="navitem" style="margin-left: 20px;">
          <span style="color: aliceblue;" @click="toUser()">我的保险</span>
        </div>
        <div class="navitem" style="margin-left: 20px;">
          <span style="color: aliceblue;" @click="toLogin()">{{ getLoginButtonText() }}</span>
        </div>
<!--        <button @click="toggleFontSize" style="background: #5771d1; font-size: 20px; border: none; color: white; padding: 8px 16px; cursor: pointer; border-radius: 4px; margin-left: auto;">-->
<!--          {{isLargeFont ? '切换年长版' : '取消年长版'}}-->
<!--        </button>-->
      </div>

    </div>
    <router-view/>
  </div>
  <el-dialog
      v-model="dialogVisible"
      title="注意"
      width="500"
      :before-close="handleClose"
  >
    <span>当前业务需要登录办理，请先登录，再进行办理！</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue';
import myAxios from '../../plugins/myAxios.js';
import {useRoute, useRouter} from 'vue-router';
import {ElNotification} from "element-plus";
import fontSizeStore from '../../common/fontSizeStore.js';
import { loadStyleSheet } from '../../common/styles/styleLoader.js';
import {logout} from '@/apis/api.js'

const router = useRouter();
const dialogVisible = ref(false);

// 使用全局字体大小状态
const { isLargeFont, toggleFontSize } = fontSizeStore.useFontSize();

// 重写toggleFontSize方法，使用全局状态并加载相应样式
const handleFontSizeToggle = () => {
  toggleFontSize();
  loadStyleSheet(isLargeFont.value);
};

const getLoginButtonText = () => {
  if (localStorage.getItem('senderAddress')) {
    if (localStorage.getItem('type')) {
      // 已登录，根据用户类型显示不同的内容
      const userType = localStorage.getItem('type');
      if (userType === '1') {
        return '个人中心';
      } else if (userType === '2') {
        return '公司中心';
      } else if (userType === '3') {
        return '社保局中心';
      }
    }
  }
  // 未登录，显示登录/注册
  return '登录/注册';
};

// toBureau
const toBureau = () => {
  //校验登录
  if (localStorage.getItem('type') === '3') {
    //   已登录
    ElNotification({
      title: '成功',
      message: '您已登录，为你跳转页面',
      type: 'success',
    })
    router.push('/user/index/welcome')
  } else {
    ElNotification({
      title: '失败',
      message: `该功能只有社保局可以使用`,
      type: 'error',
    })
  }
}

// toCompany
const toCompany = () => {
  //校验登录
  if (localStorage.getItem('type') === '2') {
    //   已登录
    ElNotification({
      title: '成功',
      message: '您已登录，为你跳转页面',
      type: 'success',
    })
    router.push('/user/index/welcome')
  } else {
    ElNotification({
      title: '失败',
      message: `该功能只有保险公司可以使用`,
      type: 'error',
    })
  }
}

//toUser
const toUser = () => {
  //校验登录
  if (localStorage.getItem('type') === '1') {
    //   已登录
    ElNotification({
      title: '成功',
      message: '您已登录，为你跳转页面',
      type: 'success',
    })
    router.push('/user/standalone/profile')
  } else {
    ElNotification({
      title: '失败',
      message: `该功能只有个人可以使用`,
      type: 'error',
    })
  }
}

const handleClose = (done) => {
  dialogVisible.value = false
}

const toInfoPages = (str) => {
  router.push('/index/infoPages' + str)
}

const toIndexPages = () => {
  router.push('/index/top')
}
//toDetailPages
const toDetailPages = () => {
  router.push('/user/index/welcome')
}


const toLogin = () => {
  if (localStorage.getItem('senderAddress')) {
    if (localStorage.getItem('type')) {
      // 根据用户类型判断跳转路径
      if (localStorage.getItem('type') === '1') {
        // ElNotification({
        //   title: '成功',
        //   message: '您已登录，为你跳转页面',
        //   type: 'success',
        // })
        router.push('/user/standalone/profile')
      } else {
        ElNotification({
          title: '成功',
          message: '您已登录，为你跳转页面',
          type: 'success',
        })
        router.push('/user/index/welcome')
      }
    } else {
      router.push('/user/login')
    }
  } else {
    router.push('/user/login')
  }
}

// isLogin
const isLogin = () => {
  if (localStorage.getItem('senderAddress')) {

    return true
  } else {
    return false
  }
}


// 注销
const loginOff = async () => {
  localStorage.removeItem('senderAddress')
  localStorage.removeItem('sponsorName')
  localStorage.removeItem('type')
  await logout();
  ElNotification({
    title: '成功',
    message: '注销成功',
    type: 'success',
  })
  router.push('/')
  router.go(0)
}
</script>

<style scoped>
.large-font {
  font-size: 30px; /* 你可以根据需要调整这个值 */
}

.large-font .hy-navi .navitem span {
  font-size: 30px; /* 确保导航栏字体也变大 */
}
</style>
